<template>
  <div class="Login">
    <!-- 表单 -->
    <div class="login-form">
      <h1>hello</h1>
      <h4>欢迎来到vue-admin-beautiful-pro！</h4>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="name">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="Pass">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="ruleForm.Pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {login} from "@/network/login";
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: "admin",
        Pass: "123456",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {min: 3,max: 12,message: "长度在 3 到 12 个字符",trigger: "blur",
          },
        ],
        Pass: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 1 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      //假设用户名称  admin  密码  123456
      if (this.ruleForm.Pass == "123456" && this.ruleForm.name == "admin") {
        //跳转到内部页面
        //链式编程实现跳转
        // this.$router.push('/Home')//没有参数
        //this.$router.push({path:'/Home',query:{id:1}}) //会以这种形式拼接home?id=1
        this.loginM();
      } else {
        this.$message({
          message: "用户名或密码错误",
          type: "warning",
        });
      }
    },
    resetForm() {
      this.ruleForm.name = "";
      this.ruleForm.Pass = "";
    },
    //登录
    loginM() {
      login("/login", {
        name: this.ruleForm.name,
        Pass: this.ruleForm.Pass
      }).then(res => {
        console.log(res)  //获取token
        //1把token值放到本地存储
        let token = res.data.token;
        let routerList = JSON.stringify(res.data.routlist)
        sessionStorage.setItem("token",token);
        //保存权限数据，就是侧边栏导航  vuex
        sessionStorage.setItem('routerList',routerList)//注意：只能放字符串类型
        this.$message({
          message: "登陆成功",
          type: "success",
        });
        this.$router.push("/Home");
      });
    },
  },
};
</script>

<style  scoped lang="less">
.Login {
  width: 100%;
  height: 100%;
  background: url("~@/assets/img/bg.jpg"); //这里引入css文件要加  ~
  background-size: cover;
  position: relative;
  .login-form {
    height: 500px;
    width: 400px;
    position: absolute;
    top: 50%;
    right: 125px;
    transform: translate(0, -50%);
  }
}
</style>